<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
     <!-- 顶部轮播图 -->
    <div class="a">轮播图</div>
    <div class="aa">
            <!-- 今日打卡 -->
            <div class="ranking">
                <p class="bb" > 今日排名 </p>
                <p class="b">9</p>
                <img  class="tp" src="./img/index-card-rank.png" alt="">
            </div>
                    <!-- 累计打卡 -->
            <div class="ranking1  ">
                <p>累计打卡23天</p>
                <button class="an" >今日打卡</button>
                <img  class="tp2" src="./img/index-card-sum.png" alt="">
            </div>
                    <!-- 运动数据 -->
            <div class="dpflex" >
                <div class="ranking2" >
                    <p class="c" >运动数据</p>
                    <img  class="tp3" src="./img/index-card-data.png" alt="">
                </div>
                <!-- 累计运动徽章 -->
                <div class="ranking3">
                    <p class="d" > 累计运动徽章 </p>
                    <p class="dd">3</p>
                    <p class="ddd" >枚</p>
                    <img  class="tp4" src="./img/index-card-badge.png" alt="">
                </div>
            </div>
            <div class="ranking4" >
                <p class="e" >课程训练</p>
                <img  class="tp5" src="./img/course-img04.jpg" alt="">
            </div>
            <div class="ranking5" >
                <p class="f" >户外跑步</p>
                <img  class="tp6" src="./img/index-card-run.png" alt="">
            </div>
    </div>
    <div class="footer dpflex" > 
        <div >
            <img  class="t1" src="./img/t1.png" alt="">
            <p class="w1" >首页</p>
        </div>
        <div >
            <img  class="t1" src="./img/t2.png" alt="">
            <p class="w2">运动</p>
        </div>
        <div >
            <img  class="t1" src="./img/t3.png" alt="">
            <p class="w2">我的</p>
        </div>    
    </div>
</body>
</html>